<template>
    <div class="manage">
        <div style="width:800px;height:380px;text-align:left;">
            <img src="../../assets/manage_1.jpg" style="height:95%;display:block;float:left;">
            <router-link to="/manageLive"><el-button type="primary" style="float:left;margin-top:20px;margin-left:20px;">进入直播控制台</el-button></router-link>
        </div>
        <div style="width:600px;height:25px;text-align:left;">
            我的直播：15个
            <el-input v-model="keyword" placeholder="请输入关键字" style="width:180px;margin-left:230px;"></el-input>
            <el-button type="primary" style="margin-left:-5px;background:#38ACB5;border-color:#38ACB5;">搜索</el-button>
        </div>
        <br>
        <router-link to="/manageNone"><el-button type="primary" style="float:left;background:#38ACB5;border-color:#38ACB5;">未开始的活动</el-button></router-link>
        <br>
        <figure>
            <img src="../../assets/home_5.jpg">
            <figcaption>
                <h4>
                    变形金刚
                    <span>1<span> 天 </span>07<span> 小时 </span>46<span> 分 </span>49<span> 秒后开始直播</span></span>
                </h4>
                <p class="time">2017-01-06 16:00</p>
                <p class="description">美版《变形金刚G1》一共4季，前两季讲述的是擎天柱率领的汽车人和威震天所率领的霸天虎之间的战争故事。第3季则是接替擎天柱的补天士和惊破天(被宇宙大帝修复改造的威震天)分别率领各自武装为信仰而战的故事。美版《变形金刚》还有一个大电影，讲述的是补天士与擎天柱政权交接的过程，和全体变形金刚合力消灭宇宙大帝的事迹。</p>
                <p class="detail"><span style="color:#38ACB5;">免费</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;观看人数：<span style="color:#38ACB5;">0</span><router-link to="/manageShare"><el-button type="primary" style="float:right;color:white;">分享与嵌入</el-button></router-link></p>
            </figcaption>
        </figure>
        <br>
        <router-link to="/manageEnd"><el-button type="primary" style="margin-top:20px;float:left;background:#38ACB5;border-color:#38ACB5;">已开始的活动</el-button></router-link>
        <br>
        <figure style="margin-bottom:40px;">
            <img src="../../assets/home_6.jpg">
            <figcaption>
                <h4>
                    环太平洋
                    <span><span>直播结束</span></span>
                </h4>
                <p class="time">2017-01-05 17:00</p>
                <p class="description">美版《变形金刚G1》一共4季，前两季讲述的是擎天柱率领的汽车人和威震天所率领的霸天虎之间的战争故事。第3季则是接替擎天柱的补天士和惊破天(被宇宙大帝修复改造的威震天)分别率领各自武装为信仰而战的故事。美版《变形金刚》还有一个大电影，讲述的是补天士与擎天柱政权交接的过程，和全体变形金刚合力消灭宇宙大帝的事迹。</p>
                <p class="detail"><span style="color:#38ACB5;">加密</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;观看人数：<span style="color:#38ACB5;">47394</span><router-link to="/manageShare"><el-button type="primary" style="float:right;color:white;">分享与嵌入</el-button></router-link></p>
            </figcaption>
        </figure>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keyword: ''
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .manage{
        width: 90%;
        margin-top: 90px;
        margin-left: 95px;
    }

    .manage>figure{
        width: 1120px;
        height: 300px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        margin-top: 22px;
        float: left;
    }

    .manage>figure>img{
        float: left;
    }

    .manage>figure>figcaption{
        width: 720px;
        float: left;
        text-align: left;
    }

    .manage>figure>figcaption>h4{
        width: 94%;
        font-size: 24px;
        color: #2C2C2C;
        float: left;
        margin-top: 20px;
        padding-left: 30px;
    }

    .manage>figure>figcaption>h4>span{
        font-size: 20px;
        float:right;
        margin-right: 20px;
    }

    .manage>figure>figcaption>h4>span>span{
        font-size: 16px;
        color: #4F5254;
        font-weight: normal;
    }

    .manage>figure>figcaption>.time{
        width: 94%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #838383;
        float: left;
        margin-top: 15px;
        margin-left: 30px;
    }

    .manage>figure>figcaption>.description{
        width: 90%;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: #4F5254;
        margin-top: 15px;
        float: left;
        margin-left: 30px;
    }

    .manage>figure>figcaption>.detail{
        width: 88%;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        margin-top: 120px;
        float: left;
        margin-left: 30px;
    }
</style>